@import "./calendar.less";

.calendar-container {
  .fixed(0, 0, 0, 0);
  z-index: 1000;
  p {
    margin: 0;
    padding: 0;
  }

  .calendar-date {
    .size(100%);

    .light-blue {
      color: #2b99f1;
    }

    .date-header {
      position: relative;
      background: #f2f2f2;
      box-sizing: border-box;
      width: 100%;
      height: 60/@rex;
      padding: 0 20/@rex;
      line-height: 60/@rex;
      .font-dpr(24px);
      z-index: 100;

      li {
        width: 14%;
        float: left;
        text-align: center;

        &:nth-child(7) {
          width: 16%;
        }
      }
    }

    .date-container {
      width: 100%;
      max-height: 100%;
      box-sizing: border-box;

      .date-wrapper {
        padding-bottom: 60/@rex;
      }

      .date-list {
        padding-top: 40/@rex;
        .font-dpr(28px);
        border-bottom: 1px solid #e5e5e5;
        .border-dpr(2px);

        &:last-of-type {
          border-bottom: none;
        }

        >p {
          text-align: center;
        }

        ul {
          padding-top: 20/@rex;
          padding: 0 20/@rex;
          .clearfix();

          li {
            .size(14%, 100/@rex);
            display: flex;
            .font-dpr(32px);
            float: left;
            justify-content: center;
            align-items: center;

            &:nth-child(7n+7) {
              width: 16%;
            }
          }

          .select-mask {
            background: #2b99f1;
            color: #fff;
          }

          .select-range {
            background: #79b0dd;
            color: #fff;
          }

          .disabled {
            background: none;
            color: #999;
          }
        }
      }
    }
  }

  .calendar-month {
    .size(100%);

    .side-bar {
      float: left;
      .size(140/@rex, 100%);
      .font-dpr(32px);
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      background: #666;
      color: #fff;
      text-align: center;
      border-right: 2px solid #f2f2f2;
      .border-dpr(1px);

      ul>li {
        line-height: 1;
        padding: 27/@rex 0;

        &.selected {
          background: #fff;
          color: #2B99F1;
        }
      }
    }

    .main-content {
      height: 100%;
      background: #fff;

      .scroller-container {
        max-height: 100%;
        width: 100%;
        padding-left: 140/@rex;
        box-sizing: border-box;
      }

      ul {
        .list-header {
          background: #f2f2f2;
          color: #666;
          .font-dpr(26px);
          padding: 14/@rex 24/@rex;
        }

        .list {
          border-bottom: 2px solid #ccc;
          .border-dpr(1px);
          color: #000;
          .font-dpr(28px);
          padding: 28/@rex 24/@rex;

          &.selected {
            color: #2B99F1;
          }

          >span {
            color: #999;
            .font-dpr(24px);
          }
        }
      }
    }
  }
}
